<template>
  <el-card class="box-card" >
    <div slot="header" class="clearfix">
      <span>用户信息</span>
    </div>
    <div class="text item" id="card">
      <div id="lt" >
        <el-form ref="accountFormRef" :model="accountForm" label-width="100px" :rules="accountFormRules">
          <el-form-item label="用户" prop="name">
              <el-input v-model="accountForm.name" >
            </el-input>
            </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="accountForm.mobile" disabled >
          </el-input>
            </el-form-item >
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="accountForm.email">
              </el-input>
            </el-form-item >
          <el-form-item label="简介">
            <el-input v-model="accountForm.intro">
            </el-input>
          </el-form-item >
          <el-form-item>
            <el-button type="primary" @click='updata()'>更新账户</el-button>
          </el-form-item>
          </el-form>
      </div>
      <div id="rt">
            <el-upload
          action=""
          :show-file-list="false"
          :http-request="httpRequest"
        >
        <!--判断是否有图像并展示，否则展示+号-->
          <img v-if="accountForm.photo" :src="accountForm.photo" class="avatar" width="200" height="200">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Account',
  data () {
    return {
      accountForm: {
        name: '',
        mobile: '',
        email: '',
        intro: ''
      },
      accountFormRules: {
        name: [
          { required: true, message: '名字必填' },
          {
            min: 1,
            max: 7,
            message: '名字长度介于1-7个字符之间'
          }
        ],
        email: [
          { required: true, message: '邮箱必填' },
          { type: 'email', message: '邮箱格式不正确' }
        ]
      }
    }
  },
  created () {
    this.getUserData()
  },
  methods: {
    getUserData () {
      let pro = this.$http.get('/user/profile')
      pro
        .then(result => {
          this.accountForm = result.data.data
        })
        .catch(err => {
          this.$message.error('获得用户数据失败' + err)
        })
    },
    updata () {
      let pro = this.$http.patch('/user/profile', this.accountForm)
      pro
        .then(result => {
          console.log(result)
          if (result.data.message === 'OK') {
            this.$message.success('修改成功')
          }
        })
        .catch(error => {
          this.$message.error('出错了' + error)
        })
    },
    httpRequest (resource) {
      // 1. FormData表单数据对象收集表单信息，即上传附件信息
      let fd = new FormData()
      // 把图片的信息添加给fd对象
      // fd.append(名称，值)
      fd.append('photo', resource.file) // 文件已经被fd保存好了

      // 2. axios带着附件到达服务器端存储
      let pro = this.$http.patch('/user/photo', fd)
      pro
        .then(result => {
          if (result.data.message === 'OK') {
            // 把服务器端返回的新的头像获得到，并更新给accountForm.photo成员里边
            // result.data.data.photo:头像完整请求地址信息
            this.accountForm.photo = result.data.data.photo
            this.$message.success('头像更新成功！')
          }
        })
        .catch(err => {
          return this.$message.error('头像更新失败：' + err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
 #card {
   display: flex;
   justify-content: space-between;
   #lt{
     width: 40%
   }
   #rt {
     width: 30%;

   }
  }
</style>
